<template>
	<view class="ban-container">
		<!-- 顶部装饰图案 -->
		<view class="top-decoration">
			<uv-icon name="warning-fill" size="120" color="#ff4d4f"></uv-icon>
		</view>

		<!-- 主要内容区 -->
		<view class="content-card">
			<view class="title">
				<text class="main-text">账号已被限制</text>
				<text class="sub-text">Account Restricted</text>
			</view>

			<!-- 倒计时区域 -->
			<view class="countdown-section">
				<text class="time-label">解封倒计时</text>
				<view class="time-display">
					<template v-if="remainDays > 0">
						<text class="time-number">{{ remainDays }}</text>
						<text class="time-unit">天</text>
					</template>
					<text class="time-number">{{ String(remainHours).padStart(2, '0') }}</text>
					<text class="time-unit">时</text>
					<text class="time-number">{{ String(remainMinutes).padStart(2, '0') }}</text>
					<text class="time-unit">分</text>
					<text class="time-number">{{ String(remainSeconds).padStart(2, '0') }}</text>
					<text class="time-unit">秒</text>
				</view>
			</view>

			<!-- 封禁信息 -->
			<view class="ban-info">
				<view class="info-item">
					<text class="label">封禁原因</text>
					<text class="value">{{ banReason }}</text>
				</view>
				<view class="info-item">
					<text class="label">封禁时间</text>
					<text class="value">{{ banTime }}</text>
				</view>
				<view class="info-item">
					<text class="label">解封时间</text>
					<text class="value">{{ unbanTime }}</text>
				</view>
			</view>

			<!-- 底部说明 -->
			<view class="footer-tips">
				<text class="tip-text">如有疑问，请联系客服</text>
				<view class="contact-btn" @tap="contactService">
					<uv-icon name="chat" size="24" color="#3c9cff"></uv-icon>
					<text>联系客服</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banReason: '系统封禁',
				banTime: '2024-03-20 15:30:00',
				unbanTime: '2024-03-27 15:30:00',
				remainDays: 0,
				remainHours: 0,
				remainMinutes: 0,
				remainSeconds: 0,
				timer: null
			}
		},

		onLoad(options) {
			// 获取封禁信息
			this.getBanInfo(options.type)
			// 开始倒计时
			this.startCountdown()
		},

		onUnload() {
			// 清除定时器
			if (this.timer) {
				clearInterval(this.timer)
			}
		},

		methods: {
			async getBanInfo(type) {
				try {
					const res = await this.$http.post(`/auth/ban/time?loginType=${type}`)
					if (res) {
						// 获取当前时间
						const now = new Date()

						// 计算解封时间（当前时间 + 剩余秒数）
						const unbanDate = new Date(now.getTime() + res * 1000)

						// 格式化时间
						this.banTime = this.formatDate(now)
						this.unbanTime = this.formatDate(unbanDate)

						// 开始倒计时
						this.startCountdown()
					}
				} catch (error) {
					console.error('获取封禁信息失败', error)
					uni.showToast({
						title: '获取封禁信息失败',
						icon: 'none'
					})
				}
			},

			// 格式化日期
			formatDate(date) {
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				const hours = String(date.getHours()).padStart(2, '0')
				const minutes = String(date.getMinutes()).padStart(2, '0')
				const seconds = String(date.getSeconds()).padStart(2, '0')

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
			},

			startCountdown() {
				// 清除可能存在的旧定时器
				if (this.timer) {
					clearInterval(this.timer)
				}

				this.timer = setInterval(() => {
					const now = new Date().getTime()
					const end = new Date(this.unbanTime).getTime()
					const remain = end - now

					if (remain <= 0) {
						clearInterval(this.timer)
						this.remainDays = 0
						this.remainHours = 0
						this.remainMinutes = 0
						this.remainSeconds = 0

						// 封禁时间结束，可以添加相应处理
						uni.showToast({
							title: '账号已解封',
							icon: 'success'
						})

						// 可以选择跳转到首页或其他页面
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}, 1500)

						return
					}

					// 计算剩余时间
					const days = Math.floor(remain / (1000 * 60 * 60 * 24))
					let hours = Math.floor((remain % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))

					// 如果没有天数，则小时可以超过24
					if (days === 0) {
						hours = Math.floor(remain / (1000 * 60 * 60))
					}

					this.remainDays = days
					this.remainHours = hours
					this.remainMinutes = Math.floor((remain % (1000 * 60 * 60)) / (1000 * 60))
					this.remainSeconds = Math.floor((remain % (1000 * 60)) / 1000)
				}, 1000)
			},

			contactService() {
				// 实现联系客服逻辑
				uni.showToast({
					title: '正在连接客服...',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'ban_page.scss';

	.time-display {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 12rpx;
		
		.time-number {
			background: #ff4d4f;
			color: #ffffff;
			padding: 16rpx 24rpx;
			border-radius: 12rpx;
			font-size: 36rpx;
			font-weight: bold;
			min-width: 60rpx;
			text-align: center;
		}
		
		.time-unit {
			color: #666666;
			font-size: 28rpx;
			margin: 0 8rpx;
			
			&:last-child {
				margin-right: 0;
			}
		}
	}
</style>